<ng-template #content let-modal>
	<div class="modal-header">
		<h4 class="modal-title">Modal title</h4>
		<button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss('Cross click')"></button>
	</div>
	<div class="modal-body">
		<p>One fine body&hellip;</p>
	</div>
	<div class="modal-footer">
		<button type="button" class="btn btn-secondary" (click)="modal.close('Close click')">Close</button>
	</div>
</ng-template>

<ng-template #longContent let-modal>
	<div class="modal-header">
		<h4 class="modal-title">Modal title</h4>
		<button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss('Cross click')"></button>
	</div>
	<div class="modal-body">
		<p>
			Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
			Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
		</p>
		<p>
			Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet
			rutrum faucibus dolor auctor.
		</p>
		<p>
			Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
			Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
		</p>
		<p>
			Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
			Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
		</p>
		<p>
			Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet
			rutrum faucibus dolor auctor.
		</p>
		<p>
			Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
			Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
		</p>
		<p>
			Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
			Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
		</p>
		<p>
			Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet
			rutrum faucibus dolor auctor.
		</p>
		<p>
			Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
			Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
		</p>
		<p>
			Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
			Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
		</p>
		<p>
			Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet
			rutrum faucibus dolor auctor.
		</p>
		<p>
			Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
			Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
		</p>
		<p>
			Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
			Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
		</p>
		<p>
			Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet
			rutrum faucibus dolor auctor.
		</p>
		<p>
			Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
			Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
		</p>
		<p>
			Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
			Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
		</p>
		<p>
			Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet
			rutrum faucibus dolor auctor.
		</p>
		<p>
			Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
			Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
		</p>
	</div>
	<div class="modal-footer">
		<button type="button" class="btn btn-secondary" (click)="modal.close('Close click')">Close</button>
	</div>
</ng-template>

<button class="btn btn-outline-primary mb-2 me-2" (click)="openWindowCustomClass(content)">
	Modal with window custom class
</button>
<button class="btn btn-outline-primary mb-2 me-2" (click)="openBackDropCustomClass(content)">
	Modal with backdrop custom class
</button>
<button class="btn btn-outline-primary mb-2 me-2" (click)="openSm(content)">Small modal</button>
<button class="btn btn-outline-primary mb-2 me-2" (click)="openLg(content)">Large modal</button>
<button class="btn btn-outline-primary mb-2 me-2" (click)="openXl(content)">Extra large modal</button>
<button class="btn btn-outline-primary mb-2 me-2" (click)="openFullscreen(content)">Fullscreen modal</button>
<button class="btn btn-outline-primary mb-2 me-2" (click)="openVerticallyCentered(content)">
	Modal vertically centered
</button>
<button class="btn btn-outline-primary mb-2 me-2" (click)="openScrollableContent(longContent)">
	Modal scrollable content
</button>
<button class="btn btn-outline-primary mb-2 me-2" (click)="openModalDialogCustomClass(content)">
	Modal with dialog custom class
</button>
